<template>
  <view>
    <view class="popup" :class="isshowArea ? 'show' : ''">
      <view class="picker-btn">
        <view class="left" @click="cancel">取消</view>
        <view class="right" @click="affirm">确定</view>
      </view>
      <picker-view :indicator-style="indicatorStyle" :value="valueArr" @change="bindChange">
        <picker-view-column>
          <view v-for="(item, i) in parent" :key="i" class="item">{{ item }}</view>
        </picker-view-column>
        <picker-view-column>
          <view
            v-for="(item, k) in children[parentArrIndex - 1]"
            :key="k"
            class="item"
          >{{ item.value }}</view>
        </picker-view-column>
      </picker-view>
    </view>
    <view v-if="isshowArea" class="mask" @click="cancel" />
  </view>
</template>
<script>
export default {
  props: {
    isshowArea: {
      type: Boolean,
      default: false
    },
    parent: {
      type: Array,
      default: []
    },
    children: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      parentArrIndex: 0,
      childrenArrIndex: "",
      valueArr: [],
      indicatorStyle: `height: ${Math.round(
        uni.getSystemInfoSync().screenWidth / (750 / 100)
      )}px;`
    };
  },
  onLoad() {
    console.log(6666666, this.areaArr);
    // this.initLoadArea();
  },
  methods: {
    bindChange: function(e) {
      const data = e.detail.value;
      console.log(data);
      this.parentArrIndex = data[0];
      this.childrenArrIndex = data[1];
    },
    affirm() {
      this.$emit("affirm", this.parentArrIndex, this.childrenArrIndex);
    },
    cancel() {
      this.$emit("cancel");
    }
  }
};
</script>

<style lang="less" scoped>
picker-view {
  width: 100%;
  height: 510upx;
  background: #fff;
  .item {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.popup {
  width: 100%;
  // position: absolute;
  position: fixed;
  z-index: 999;
  height: 0upx;
  overflow: hidden;
  bottom: 0upx;
  box-sizing: border-box;
  .picker-btn {
    display: flex;
    height: 100upx;
    width: 100%;
    line-height: 100upx;
    background: #fff;
    font-size: 17px;
    z-index: 1;
    border-bottom: 1rpx solid #f8f8f8;

    .left {
      flex: 1;
      color: #0076ff;
      padding-left: 40upx;
      box-sizing: border-box;
    }

    .right {
      flex: 1;
      text-align: right;
      padding-right: 40upx;
      color: #fe4533;
      box-sizing: border-box;
    }
  }
}
.show {
  height: 600upx;
  transition: height 0.3s;
}
.mask {
  position: fixed;
  z-index: 998;
  top: 0upx;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
</style>
